<script setup lang="ts">
import {} from "vue";
import { QSpace } from "quasar";

import {} from "qqlx-core";
import {} from "qqlx-cdk";

const vueProps = defineProps<{
  /** 一共12列 */
  left?: number;

  textClass?: string;
}>();
</script>

<template>
  <div class="flex flex-nowrap items-start gap-1.5 flex-shrink-0">
    <div class="whitespace-nowrap" :class="textClass || 'text-secondary'" :style="`max-width: ${(100 * (vueProps.left || 5)) / 12}%`">
      <slot name="left"></slot>
    </div>

    <q-space></q-space>
    <div class="text-right break-all" :class="textClass || 'text-secondary'">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<style></style>
